<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card" shadow="never" style="margin-top:8px">
          <div slot="header">
            <span><B>分类列表</B></span>
          </div>
          <el-tree
            :data="typeList"
            :props="defaultProps"
            :expand-on-click-node="false"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <el-col :span="20">
        <vxe-form
          :data="formData"
          @submit="onSearchBtnClick"
          @reset="onSearchBtnClick"
          custom-layout
        >
          <vxe-form-item
            field="warehouseName"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入仓库名称搜索' },
            }"
          />
          <vxe-form-item
            field="productId"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入产品名称搜索' },
            }"
          />
          <vxe-form-item
            field="productId"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入产品编码搜索' },
            }"
          />
          <vxe-form-item
            field="productId"
            :item-render="{
              name: 'input',
              attrs: { placeholder: '请输入产品规格搜索' },
            }"
          />
          <vxe-form-item
            :item-render="{
              name: '$buttons',
              children: [
                {
                  props: { type: 'submit', content: '查询', status: 'primary' },
                },
                { props: { type: 'reset', content: '重置' } },
              ],
            }"
          />
          <vxe-form-item>
            <template #default>
              <vxe-button size="medium" @click="showMore" v-if="!isShowMore">
                更多
              </vxe-button>
              <vxe-button size="medium" @click="showMore" v-else
                >收起</vxe-button
              >
            </template>
          </vxe-form-item>
          <div v-if="isShowMore">
            <vxe-form-item
              field="supplierName"
              :item-render="{
                name: 'input',
                attrs: { placeholder: '请输入供应商名称搜索' },
              }"
            />
            <vxe-form-item
              field="supplierName"
              :item-render="{
                name: 'input',
                attrs: { placeholder: '请输入货主名称搜索' },
              }"
            />
            <vxe-form-item>
              <template>
                <el-date-picker
                  v-model="selectedDate"
                  type="daterange"
                  align="left"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="getDateInterval()"
                  size="small"
                >
                </el-date-picker>
              </template>
            </vxe-form-item>
          </div>
        </vxe-form>
        <vxe-toolbar custom>
          <template v-slot:buttons>
            <vxe-button size="medium" icon="el-icon-download">导出</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="table"
          border
          size="mini"
          resizable
          highlight-current-row
          :data="tableData"
          align="left"
          show-overflow
          show-header-overflow
        >
          <vxe-table-column type="seq" width="50" title="序号" align="center" />
          <vxe-table-column field="warehouseName" title="仓库" width="100px" />

          <vxe-table-column field="goodsName" title="产品名称" width="120px" />
          <vxe-table-column field="goodsCode" title="产品编码" width="100px" />
          <vxe-table-column field="spec" title="产品规格" width="200px" />

          <vxe-table-column
            field="lastNum"
            title="上期结存数量"
            width="100px"
            align="right"
          />
          <vxe-table-column
            field="periodInNum"
            title="本期入库数量"
            width="100px"
            align="right"
          />
          <vxe-table-column
            field="periodOutNum"
            title="本期出库数量"
            width="100px"
            align="right"
          />
          <vxe-table-column
            field="periodNum"
            title="本期结存数量"
            width="100px"
            align="right"
          />

          <vxe-table-column field="unit" title="单位" width="65px" />
          <vxe-table-column
            field="supplierName"
            title="供应商名称"
            width="100px"
          />
          <vxe-table-column
            field="goodsOwnerName"
            title="货主名称"
            width="100px"
          />
        </vxe-table>
        <vxe-pager
          :current-page.sync="formData.currentPage"
          :page-size.sync="formData.pageSize"
          :total="total"
          :page-sizes="[10, 20, 100, 200]"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'Sizes',
            'FullJump',
            'Total',
          ]"
          @page-change="handlePageChange"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { moneyFormat, getDateInterval } from '@/utils/customFilter'
export default {
  components: {},
  data() {
    return {
      loading: false,
      isShowMore: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
      },
      visible: false,
      tableData: [],
      multipleSelection: [],
      detail: null,
      detailInfo: null,
      selectedDate: '',
      total: 0,
      data: [],
      param: {},
      checked: [],
      defaultProps: {
        children: 'childrens',
        label: 'name',
      },
      typeList: [
        {
          id: '1d61ec1791102f45f0f52b52e2ab6b7b',
          name: '成品',
          childrens: [
            {
              id: 'hj',
              name: '桁架',
            },
            {
              id: 'gj',
              name: '箍筋',
            },
            {
              id: 'bmb',
              name: '边模板',
            },
          ],
        },
        {
          id: 'ycl',
          name: '原材料',
          childrens: [
            {
              id: 'ycl-gj',
              name: '钢筋',
            },
            {
              id: 'gb',
              name: '钢板',
            },
          ],
        },
      ],
      data: {
        total: 3,
        list: [
          {
            id: '1',
            warehouseName: '东区B仓',
            supplierId: '1',
            supplierName: '寅鼎',
            goodsOwnerName: '寅鼎',
            goodsType: '桁架',
            goodsName: '裙房第九层桁架楼承板',
            goodsCode: 'HJLCB',
            spec: '板编号:9A2,型号:TD6-170,长度mm:6775',
            number: '21.00',
            unit: '件',
            lastNum: 110,
            periodInNum: 120,
            periodOutNum: 130,
            periodNum: 230,
          },
          {
            id: '2',
            warehouseName: '东区B仓',
            supplierId: '1',
            supplierName: '寅鼎',
            goodsOwnerName: '寅鼎',
            goodsType: '桁架',
            goodsName: '裙房第九层桁架楼承板',
            goodsCode: 'HJLCB',
            spec: '板编号:9A3,型号:TD6-170,长度mm:11565',
            number: '60.00',
            unit: '件',
            lastNum: 110,
            periodInNum: 120,
            periodOutNum: 130,
            periodNum: 230,
          },
          {
            id: '3',
            warehouseName: '东区B仓',
            supplierId: '1',
            supplierName: '寅鼎',
            goodsOwnerName: '寅鼎',
            goodsType: '桁架',
            goodsName: '裙房第九层桁架楼承板',
            goodsCode: 'HJLCB',
            spec: '板编号:9A3,型号:TD6-170,长度mm:11565',
            number: '35.00',
            unit: '件',
            lastNum: 110,
            periodInNum: 120,
            periodOutNum: 130,
            periodNum: 230,
          },
          {
            id: '5',
            warehouseName: '东区B仓',
            supplierId: '1',
            supplierName: '宝钢',
            goodsOwnerName: '寅鼎',
            goodsType: '钢筋',
            goodsName: '钢筋',
            goodsCode: 'GJ',
            spec: '龙钢,HRB335',
            number: '35.00',
            unit: '米',
            lastNum: 110,
            periodInNum: 120,
            periodOutNum: 130,
            periodNum: 230,
          },
          {
            id: '5',
            warehouseName: '东区B仓',
            supplierId: '1',
            supplierName: '宝钢',
            goodsOwnerName: '寅鼎',
            goodsType: '钢板',
            goodsName: '镀锌板',
            goodsCode: 'DXB',
            spec: '龙宝钢,镀锌板,0.20*1000*C',
            number: '12.00',
            unit: '米',
            lastNum: 110,
            periodInNum: 120,
            periodOutNum: 130,
            periodNum: 230,
          },
        ],
      },
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    },
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    moneyFormat,
    getDateInterval,
    onSearchBtnClick() {
      // this.loading = true;
      // coalEnters(this.formData).then(data => {

      this.tableData = this.data.list
      this.total = this.data.total
      // this.loading = false;
      // });
    },

    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    colseDialog() {
      this.detail = null
      this.onSearchBtnClick()
    },
    onChangeEnable($event, id) {},
    detailInfoPage(row) {
      this.detailInfo = row
    },
    handleNodeClick(data) {
      console.log('选中的分类', data.id)
    },
    showMore() {
      this.isShowMore = !this.isShowMore
    },
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      return count
    }
  },
}
</script>

<style scoped></style>
